<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>我的优惠券 - 社交商城</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      margin: 0;
      padding-bottom: 15px;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #ff4d4f;
      color: white;
    }
    
    /* 优惠券筛选 */
    .coupon-filter {
      background-color: #fff;
      padding: 10px 0;
      overflow-x: auto;
      border-bottom: 1px solid #eee;
    }
    
    .filter-tabs {
      display: flex;
      min-width: 100%;
      padding: 0 15px;
    }
    
    .filter-tab {
      padding: 5px 15px;
      font-size: 14px;
      white-space: nowrap;
      color: #666;
      border-bottom: 2px solid transparent;
    }
    
    .filter-tab.active {
      color: #ff4d4f;
      border-bottom-color: #ff4d4f;
      font-weight: 500;
    }
    
    /* 通用优惠券页面样式 */
    .coupons-page {
      display: none;
    }
    
    .coupons-page.active {
      display: block;
    }
    
    /* 优惠券列表容器 */
    .coupons-container {
      padding: 15px;
    }
    
    /* 优惠券基础样式 */
    .coupon-item {
      margin-bottom: 12px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      background-color: #fff;
    }
    
    .coupon-available {
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .coupon-expired {
      filter: grayscale(100%);
      opacity: 0.7;
    }
    
    .coupon-left {
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 2;
    }
    
    .coupon-right {
      padding: 15px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }
    
    .coupon-value {
      font-size: 28px;
      font-weight: 700;
      line-height: 1;
    }
    
    .coupon-unit {
      font-size: 16px;
      margin-right: 3px;
    }
    
    .coupon-type {
      font-size: 14px;
      margin-top: 5px;
    }
    
    .coupon-title {
      font-weight: 600;
      margin-bottom: 5px;
      font-size: 16px;
      line-height: 1.3;
    }
    
    .coupon-desc {
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .coupon-date {
      font-size: 12px;
      color: #999;
    }
    
    .coupon-btn {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border: none;
    }
    
    .btn-available {
      background-color: #ff4d4f;
      color: white;
    }
    
    .btn-expired {
      background-color: #eee;
      color: #999;
    }
    
    /* 装饰元素 */
    .coupon-corner {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #f5f7fa;
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
    }
    
    .coupon-stripe {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background-image: linear-gradient(to bottom, #eee 50%, transparent 50%);
      background-size: 12px 12px;
      z-index: 2;
    }
    
    /* 样式1 - 标准布局 */
    .standard-coupons .coupon-item {
      display: flex;
    }
    
    .standard-coupons .coupon-left {
      width: 100px;
      background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
      color: white;
    }
    
    .standard-coupons .coupon-corner {
      left: 90px;
    }
    
    .standard-coupons .coupon-stripe {
      left: 100px;
    }
    
    /* 样式2 - 简约布局 */
    .simple-coupons .coupon-item {
      display: flex;
      border: 1px dashed #ff4d4f;
    }
    
    .simple-coupons .coupon-left {
      width: 80px;
      color: #ff4d4f;
      background-color: #fff0f0;
    }
    
    .simple-coupons .coupon-value {
      font-size: 24px;
    }
    
    .simple-coupons .coupon-btn {
      padding: 4px 10px;
      font-size: 13px;
    }
    
    /* 样式3 - 卡片布局 */
    .card-coupons .coupon-item {
      border: 1px solid #eee;
    }
    
    .card-coupons .coupon-header {
      padding: 12px 15px;
      background: linear-gradient(90deg, #52c41a 0%, #7cb305 100%);
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .card-coupons .coupon-body {
      padding: 12px 15px;
    }
    
    .card-coupons .coupon-footer {
      padding: 8px 15px;
      background-color: #f9f9f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #666;
    }
    
    .card-coupons .coupon-btn {
      position: static;
      transform: none;
    }
    
    /* 样式4 - 标签布局 */
    .tag-coupons .coupons-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    
    .tag-coupons .coupon-item {
      display: flex;
      flex-direction: column;
      padding: 12px;
      border: 1px solid #eee;
    }
    
    .tag-coupons .coupon-tag {
      position: absolute;
      top: 0;
      right: 0;
      background-color: #faad14;
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 0 0 0 4px;
    }
    
    .tag-coupons .coupon-value {
      font-size: 22px;
      color: #ff4d4f;
      margin-bottom: 8px;
    }
    
    .tag-coupons .coupon-title {
      font-size: 14px;
      margin-bottom: 5px;
      flex: 1;
    }
    
    .tag-coupons .coupon-date {
      font-size: 11px;
      margin-bottom: 8px;
    }
    
    .tag-coupons .coupon-btn {
      position: static;
      transform: none;
      width: 100%;
      padding: 5px 0;
      font-size: 13px;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">我的优惠券</h1>
    <a href="#" class="nav-btn" id="moreBtn">
      <i class="fa fa-ellipsis-v"></i>
    </a>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准布局</div>
      <div class="style-tab" data-style="simple">简约布局</div>
      <div class="style-tab" data-style="card">卡片布局</div>
      <div class="style-tab" data-style="tag">标签布局</div>
    </div>
  </div>
  
  <!-- 优惠券筛选 -->
  <div class="coupon-filter">
    <div class="filter-tabs">
      <div class="filter-tab active">全部优惠券</div>
      <div class="filter-tab">未使用 (8)</div>
      <div class="filter-tab">已使用 (12)</div>
      <div class="filter-tab">已过期 (5)</div>
    </div>
  </div>
  
  <!-- 样式1 - 标准布局 -->
  <div class="coupons-page active standard-coupons" id="standard">
    <div class="coupons-container">
      <div class="coupon-item coupon-available">
        <div class="coupon-left">
          <div class="coupon-value"><span class="coupon-unit">¥</span>50</div>
          <div class="coupon-type">满299可用</div>
        </div>
        <div class="coupon-corner"></div>
        <div class="coupon-stripe"></div>
        <div class="coupon-right">
          <div class="coupon-title">全品类通用优惠券</div>
          <div class="coupon-desc">适用于商城内所有商品，特例商品除外</div>
          <div class="coupon-date">有效期至：2023-12-31</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-available">
        <div class="coupon-left">
          <div class="coupon-value"><span class="coupon-unit">¥</span>30</div>
          <div class="coupon-type">满199可用</div>
        </div>
        <div class="coupon-corner"></div>
        <div class="coupon-stripe"></div>
        <div class="coupon-right">
          <div class="coupon-title">服饰类专用优惠券</div>
          <div class="coupon-desc">适用于男装、女装、童装、鞋包类商品</div>
          <div class="coupon-date">有效期至：2023-11-15</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-available">
        <div class="coupon-left">
          <div class="coupon-value">8<span class="coupon-unit">折</span></div>
          <div class="coupon-type">最高减100</div>
        </div>
        <div class="coupon-corner"></div>
        <div class="coupon-stripe"></div>
        <div class="coupon-right">
          <div class="coupon-title">新品首发专属折扣券</div>
          <div class="coupon-desc">仅限本月新品使用，不与其他优惠叠加</div>
          <div class="coupon-date">有效期至：2023-10-30</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-expired">
        <div class="coupon-left">
          <div class="coupon-value"><span class="coupon-unit">¥</span>20</div>
          <div class="coupon-type">满99可用</div>
        </div>
        <div class="coupon-corner"></div>
        <div class="coupon-stripe"></div>
        <div class="coupon-right">
          <div class="coupon-title">日常通用优惠券</div>
          <div class="coupon-desc">适用于商城内所有商品，特例商品除外</div>
          <div class="coupon-date">已过期：2023-09-15</div>
          <button class="coupon-btn btn-expired" disabled>已过期</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式2 - 简约布局 -->
  <div class="coupons-page simple-coupons" id="simple">
    <div class="coupons-container">
      <div class="coupon-item coupon-available">
        <div class="coupon-left">
          <div class="coupon-value"><span class="coupon-unit">¥</span>50</div>
          <div class="coupon-type">满299</div>
        </div>
        <div class="coupon-right">
          <div class="coupon-title">全品类通用券</div>
          <div class="coupon-date">至2023-12-31</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">领券</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-available">
        <div class="coupon-left">
          <div class="coupon-value"><span class="coupon-unit">¥</span>30</div>
          <div class="coupon-type">满199</div>
        </div>
        <div class="coupon-right">
          <div class="coupon-title">服饰类专用券</div>
          <div class="coupon-date">至2023-11-15</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">领券</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-available">
        <div class="coupon-left">
          <div class="coupon-value">8<span class="coupon-unit">折</span></div>
          <div class="coupon-type">限新品</div>
        </div>
        <div class="coupon-right">
          <div class="coupon-title">新品首发折扣券</div>
          <div class="coupon-date">至2023-10-30</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">领券</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-expired">
        <div class="coupon-left">
          <div class="coupon-value"><span class="coupon-unit">¥</span>20</div>
          <div class="coupon-type">满99</div>
        </div>
        <div class="coupon-right">
          <div class="coupon-title">日常通用券</div>
          <div class="coupon-date">已过期</div>
          <button class="coupon-btn btn-expired" disabled>已过期</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式3 - 卡片布局 -->
  <div class="coupons-page card-coupons" id="card">
    <div class="coupons-container">
      <div class="coupon-item coupon-available">
        <div class="coupon-header">
          <div>¥50 优惠券</div>
          <div>满299可用</div>
        </div>
        <div class="coupon-body">
          <div class="coupon-title">全品类通用优惠券</div>
          <div class="coupon-desc">适用于商城内所有商品，特例商品除外</div>
        </div>
        <div class="coupon-footer">
          <div>有效期至：2023-12-31</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-available">
        <div class="coupon-header" style="background: linear-gradient(90deg, #1890ff 0%, #096dd9 100%);">
          <div>¥30 优惠券</div>
          <div>满199可用</div>
        </div>
        <div class="coupon-body">
          <div class="coupon-title">服饰类专用优惠券</div>
          <div class="coupon-desc">适用于男装、女装、童装、鞋包类商品</div>
        </div>
        <div class="coupon-footer">
          <div>有效期至：2023-11-15</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-available">
        <div class="coupon-header" style="background: linear-gradient(90deg, #faad14 0%, #fa8c16 100%);">
          <div>8折 折扣券</div>
          <div>最高减100</div>
        </div>
        <div class="coupon-body">
          <div class="coupon-title">新品首发专属折扣券</div>
          <div class="coupon-desc">仅限本月新品使用，不与其他优惠叠加</div>
        </div>
        <div class="coupon-footer">
          <div>有效期至：2023-10-30</div>
          <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
        </div>
      </div>
      
      <div class="coupon-item coupon-expired">
        <div class="coupon-header" style="background: linear-gradient(90deg, #8c8c8c 0%, #595959 100%);">
          <div>¥20 优惠券</div>
          <div>满99可用</div>
        </div>
        <div class="coupon-body">
          <div class="coupon-title">日常通用优惠券</div>
          <div class="coupon-desc">适用于商城内所有商品，特例商品除外</div>
        </div>
        <div class="coupon-footer">
          <div>已过期：2023-09-15</div>
          <button class="coupon-btn btn-expired" disabled>已过期</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 样式4 - 标签布局 -->
  <div class="coupons-page tag-coupons" id="tag">
    <div class="coupons-container">
      <div class="coupon-item coupon-available">
        <div class="coupon-tag">热门</div>
        <div class="coupon-value"><span class="coupon-unit">¥</span>50</div>
        <div class="coupon-title">全品类通用优惠券</div>
        <div class="coupon-date">至2023-12-31</div>
        <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
      </div>
      
      <div class="coupon-item coupon-available">
        <div class="coupon-value"><span class="coupon-unit">¥</span>30</div>
        <div class="coupon-title">服饰类专用优惠券</div>
        <div class="coupon-date">至2023-11-15</div>
        <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
      </div>
      
      <div class="coupon-item coupon-available">
        <div class="coupon-tag">新品</div>
        <div class="coupon-value">8<span class="coupon-unit">折</span></div>
        <div class="coupon-title">新品首发专属折扣券</div>
        <div class="coupon-date">至2023-10-30</div>
        <button class="coupon-btn btn-available" onclick="showToast('优惠券已领取')">立即领取</button>
      </div>
      
      <div class="coupon-item coupon-expired">
        <div class="coupon-value"><span class="coupon-unit">¥</span>20</div>
        <div class="coupon-title">日常通用优惠券</div>
        <div class="coupon-date">已过期</div>
        <button class="coupon-btn btn-expired" disabled>已过期</button>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const couponsPages = document.querySelectorAll('.coupons-page');
    const filterTabs = document.querySelectorAll('.filter-tab');
    const backBtn = document.getElementById('backBtn');
    const moreBtn = document.getElementById('moreBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        couponsPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 筛选切换
    filterTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        filterTabs.forEach(t => t.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回个人中心');
    });
    
    // 更多按钮
    moreBtn.addEventListener('click', function() {
      showToast('更多操作');
    });
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
